<template>
	<navBar title="企业法律顾问">
		<template #right_Bar>
			<view class="iconfont icon-tianjia size36 color-666 p-right20"></view>
		</template>
	</navBar>

	<view class="list" @click="toDetails">
		<view class="row j-sb a-center">
			<text class="company">重庆百事得律师事务所</text>
			<view class="iconfont icon-guanbi2 size40 color-ccc"></view>
		</view>
		<view class="character">
			<image :src="staticImg('bj.png')" mode="aspectFill" class="userImg"></image>
			<view class="character_info">
				<view class="d-flex a-center size26">
					<text class="color-666">姓名：</text>
					<text class="color-222">周律师</text>
				</view>
				<view class="d-flex size26 m-top20">
					<text class="color-666">擅长：</text>
					<view class="begoodBox">
						<view class="begoods">劳动纠纷</view>
						<view class="begoods">房产纠纷</view>
					</view>
				</view>
			</view>
		</view>
		<view class="intro ellipsis_2">
			<text class="color-666">简介：</text>
			<text class="color-222"
				>周律师，男，汉族，重庆市人，中共党员，大学文
				化，现任庆市人汉族，重庆市人，中共党员现任庆市人汉族，重庆市人，中共党员</text
			>
		</view>

		<view class="Controls">
			<view class="Btn server">服务档案</view>
			<view class="Btn yelp">呼 叫</view>
			<view class="Btn consult">在线咨询</view>
		</view>
	</view>

	<view class="list">
		<view class="row j-sb a-center">
			<text class="company">重庆百事得律师事务所</text>
			<view class="iconfont icon-guanbi2 size40 color-ccc"></view>
		</view>
		<view class="character">
			<image :src="staticImg('bj.png')" mode="aspectFill" class="userImg"></image>
			<view class="character_info">
				<view class="d-flex a-center size26">
					<text class="color-666">姓名：</text>
					<text class="color-222">周律师</text>
				</view>
				<view class="d-flex size26 m-top20">
					<text class="color-666">擅长：</text>
					<view class="begoodBox">
						<view class="begoods">劳动纠纷</view>
						<view class="begoods">房产纠纷</view>
					</view>
				</view>
			</view>
		</view>
		<view class="intro ellipsis_2">
			<text class="color-666">简介：</text>
			<text class="color-222"
				>周律师，男，汉族，重庆市人，中共党员，大学文
				化，现任庆市人汉族，重庆市人，中共党员现任庆市人汉族，重庆市人，中共党员</text
			>
		</view>

		<view class="Controls">
			<view class="Btn server">服务档案</view>
			<view class="Btn yelp">呼 叫</view>
			<view class="Btn consult">在线咨询</view>
		</view>
	</view>
</template>

<script setup>
	import { toUrl, staticImg } from '@/utils/utils.js';
	import { ref, computed, watch } from 'vue';
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();

	const toDetails = () => {
		toUrl('details');
	};
</script>

<style lang="scss">
	page {
		background-color: $page;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 710rpx;
		background-color: #ffffff;
		padding: 24rpx;
		border-radius: 10rpx;
		margin: 24rpx auto 0;
		position: relative;
		.company {
			flex: 1;
			color: #222;
			font-size: 28rpx;
			font-weight: 500;
		}
		.character {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			.userImg {
				width: 108rpx;
				height: 108rpx;
				border-radius: 10rpx;
				margin-right: 18rpx;
			}
			&_info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.begoodBox {
					flex: 1;
					.begoods {
						padding: 2rpx 10rpx;
						border-radius: 8rpx;
						color: #ff6b09;
						border: 1rpx solid #ffb888;
						display: inline-block;
						margin-right: 12rpx;
					}
					.begoods:last-child {
						margin-right: 0;
					}
				}
			}
		}
		.intro {
			width: 100%;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
		.Controls {
			width: 100%;

			text-align: right;
			margin-top: 30rpx;
			.Btn {
				width: 154rpx;
				height: 66rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				display: inline-block;
				text-align: center;
				line-height: 66rpx;
				margin-left: 20rpx;
			}
			.server {
				color: v-bind('mainStore.color');
				border: 1px solid v-bind('mainStore.color');
			}
			.yelp {
				color: v-bind('mainStore.color');
				background-color: rgba(0, 131, 255, 0.1);
			}
			.consult {
				color: #fff;
				background-color: v-bind('mainStore.color');
			}
		}
	}
</style>
